<template>
  <YearlyPicker
    v-model:visible="yearlyPicker"
    v-model="selfYearly"
  ></YearlyPicker>

  <!-- <HalfPicker v-model:visible="halfPicker" v-model="selfHalf"></HalfPicker> -->

  <SemesterPicker
    v-model:visible="termPicker"
    v-model="selfTerm"
  ></SemesterPicker>

  <van-popup
    v-model:show="showPopup"
    position="bottom"
    :style="{ 'padding-top': '15px' }"
    round
    class="search-popup"
  >
    <van-field
      :model-value="selfYearly"
      is-link
      readonly
      name="picker"
      label="年度"
      placeholder="点击选择年度"
      @click="yearlyPicker = true"
    />

    <!-- <van-field
      :model-value="selfHalf"
      is-link
      readonly
      name="picker"
      label="半年度"
      placeholder="点击选择半年度"
      @click="halfPicker = true"
    /> -->

    <van-field
      :model-value="selfTerm?.term"
      is-link
      readonly
      name="picker"
      label="学期"
      placeholder="点击选择学期"
      @click="termPicker = true"
    />

    <van-field
      v-if="!isEducation"
      :model-value="project?.projectName"
      is-link
      readonly
      name="picker"
      label="请选择项目"
      placeholder="点击选择项目"
      @click="projectPicker = true"
    />

    <ProjectPicker
      v-model="selfProject"
      v-model:visible="projectPicker"
    ></ProjectPicker>
  </van-popup>
</template>

<script lang="ts" setup>
import dayjs from 'dayjs'
import { ref, defineEmits, defineProps } from 'vue'
import { useVModels } from '@vueuse/core'
import { Project } from '/@/types/Project'
import ProjectPicker from './components/ProjectPicker.vue'
import YearlyPicker from './components/YearlyPicker.vue'
import SemesterPicker from './components/SemesterPicker.vue'
import HalfPicker from './components/HalfPicker.vue'
import { Term } from '/@/types/Term'
import { Half } from '/@/types/Half'
import { useLoginer } from '/@/use/loginer'

const props = defineProps<{
  project: Project
  yearly: string
  half: Half | null
  term: Term | null
  show: boolean
}>()

const emits = defineEmits([
  'update:project',
  'update:yearly',
  'update:half',
  'update:term',
  'update:show',
])

const {
  project: selfProject,
  yearly: selfYearly,
  half: selfHalf,
  term: selfTerm,
  show: showPopup,
} = useVModels(props, emits)

const projectPicker = ref(false)

const yearlyPicker = ref(false)

const halfPicker = ref(false)

const termPicker = ref(false)

const { isEducation } = useLoginer()
</script>

<style lang="less" scoped>
.search-popup {
  padding-top: 20px;
}
</style>
